<template>
 <el-container>
  <el-aside :width="isCollapse?'60px':'200px'">
      <!-- <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b" :collapse="isCollapse"
      :collapse-transition=false
      ><div class="col" @click="collapse">|||</div>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>系统管理</span>
        </template>
       <el-menu-item-group>
          <el-menu-item index="1-1">用户管理</el-menu-item>
          <el-menu-item index="1-2">部门管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
     <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>日志管理</span>
        </template>
       <el-menu-item-group>
          <el-menu-item index="1-1">操作日志</el-menu-item>
          <el-menu-item index="1-2">登录日志</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu> -->
      <!-- 侧边栏 -->
        <el-menu
          :collapse="isCollapse"
          :router="true"
          :collapse-transition="false"
          unique-opened
          @open="handleOpen"
          @close="handleClose"
          background-color="#272c33"
          text-color="#fff"
          active-text-color="#ffd04b"
        ><div class="col" @click="collapse">|||</div>
          <Menu :menuData="menuData"></Menu>
        </el-menu>
  </el-aside>
  <el-container>
    <el-header>
      <div class="logo"><img src="../../assets/images/bf.jpg"></div>
      <div class="title">新冠管理系统</div>
      <div class="opration">
       <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
       <img src="../../assets/images/bf.jpg">
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus" command="user">个人中心</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus" command="talk">论坛</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus-outline"
         command="cancle">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown></div>
    </el-header>
    <el-main><router-view></router-view></el-main>
  </el-container>
</el-container>
</template>

<script>
import { mapMutations } from "vuex";
import { USERLOGIN, USERLOGOUT } from "../../store/types";
import Menu from '../../components/Menu.vue'
import {tree} from '../../api/menu.js'
//import {request} from '../../utils/index.js'
export default {
  components: {
    Menu,
  },
  data () {
    return {
      isCollapse:false,
      menuData:[]
    }
  },
     methods: {
        ...mapMutations([USERLOGIN, USERLOGOUT]),
     async  getTreeMenu(){
        let result=await tree();
        console.log(result);
        this.menuData=result.data.tree;
       }
      //  , async  getTreeMenu1(){
      //   let result=await request({
      //     url:"/menu/tree"
      //   });console.log("1111");
      //   console.log(result);
      //  }
      //  ,
    ,  handleCommand(command) {//退出登录
       if(command==="cancle"){
          //退出登录,并且需要清空vuex和sessionStorage中的内容
        this[USERLOGOUT]();
          this.$router.push({
            path:'/login'
          });
       }
      }, handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },collapse(){
        this.isCollapse=!this.isCollapse;
        //取反，打开就折叠，类似于循环，有点等待下次的味道
      }
    },created () {
      this.getTreeMenu();
    }
  
}
</script>

<style lang="less" scoped>
.el-container{//父容器样式
  height: 100%;
}
.el-header {
    background-color: black;
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
   
    img{
      height: 70px;
      width: 70px;
      border-radius:50% ;
      margin: 20px;
    }
  }
  
  .el-aside {
    background-color: black;
    color: #333;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
    .col{
      height: 30px;
      width: 30px;
      background-color: yellow;
      color: white;
      margin: auto;
      text-align: center;
    }.el-main{
      border-right:none ;
    }
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    //text-align: center;
    line-height: 160px;
  }
  

</style>